<template>
  <div class="mobile-daily-report" @touchstart="handleTouchStart" @touchmove="handleTouchMove">
    <!-- 加载日报详情loading遮罩 - 移到最外层 -->
    <div v-if="isLoadingReport" class="report-loading-overlay">
      <div class="loading-content">
        <el-icon class="loading-icon">
          <Loading />
        </el-icon>
        <span class="loading-text">正在加载日报详情...</span>
      </div>
    </div>

    <!-- 顶部导航栏 -->
    <div class="mobile-header">
      <el-tabs v-model="activeTab" class="mobile-tabs" stretch>
        <el-tab-pane label="草稿" name="1"></el-tab-pane>
        <el-tab-pane label="已提交" name="2"></el-tab-pane>
        <el-tab-pane label="全部" name="3"></el-tab-pane>
      </el-tabs>
      </div>
      
    <!-- 过滤条件 -->
    <div class="mobile-filters">
      <!-- 搜索框 -->
      <div class="search-container">
        <el-input v-model="searchKeyword" placeholder="搜索日报内容" clearable @keyup.enter="handleSearch"
          class="mobile-search">
          <template #prefix>
            <el-icon>
              <Search />
            </el-icon>
          </template>
        </el-input>
      </div>

      <!-- 筛选条件 -->
      <div class="filter-container">
        <!-- 月份筛选 -->
        <div class="filter-item filter-item-date">
          <div class="filter-header">
            <el-icon class="filter-icon">
              <Calendar />
            </el-icon>
            <span class="filter-label">月份</span>
          </div>
          <el-select v-model="selectedMonth" placeholder="选择月份" clearable class="mobile-filter">
            <el-option v-for="month in months" :key="month.value" :label="month.label" :value="month.value" />
      </el-select>
          </div>
          
        <!-- 部门筛选 -->
        <div class="filter-item" v-if="activeTab === '3'">
          <div class="filter-header">
            <el-icon class="filter-icon">
              <OfficeBuilding />
            </el-icon>
            <span class="filter-label">部门</span>
                  </div>
          <el-select v-model="selectedDepartment" placeholder="选择部门" clearable class="mobile-filter">
            <el-option label="全部" value="all" />
            <el-option label="技术部" value="技术部" />
            <el-option label="市场部" value="市场部" />
            <el-option label="运营部" value="运营部" />
      </el-select>
                </div>

        <!-- 人员筛选 -->
        <div class="filter-item" v-if="activeTab === '3'">
          <div class="filter-header">
            <el-icon class="filter-icon">
              <User />
            </el-icon>
            <span class="filter-label">人员</span>
          </div>
          <el-select v-model="selectedAuthor" placeholder="选择人员" clearable class="mobile-filter">
            <el-option label="全部" value="all" />
            <el-option v-for="staff in staffList" :key="staff.id" :label="staff.name" :value="staff.name" />
                    </el-select>
                  </div>
                  
            </div>
          </div>
          
    <!-- 创建日报按钮 -->
    <div class="create-report-container">
      <el-button type="primary" @click="createNewReport" class="create-report-btn" :loading="isInitializing"
        :disabled="isInitializing">
        <el-icon v-if="!isInitializing" class="btn-icon">
          <Plus />
        </el-icon>
        {{ isInitializing ? '正在创建...' : '新增日报' }}
      </el-button>
    </div>
          
    <!-- 日报列表 -->
    <div class="mobile-report-list" @scroll="handleScroll">
      <template v-if="filteredReports.length > 0">
        <div v-for="report in filteredReports" :key="report.ID" @click="loadReport(report.ID)"
          class="mobile-report-item" :class="{
            'active': activeReportId === report.ID,
            'draft': report.dailyType === 2,
            'submitted': report.dailyType === 1
          }">
          <div class="report-date">{{ formatMobileDate(report.dailyDate) }}</div>
          <div class="report-meta">
            <span class="report-author">{{ report.userName }}</span>
            <el-tag v-if="activeTab === '3'" size="small" :type="isReportRead(report) ? 'success' : 'danger'">
              {{ isReportRead(report) ? '已读' : '未读' }}
                    </el-tag>
                  </div>
                </div>
        
        <!-- 加载更多状态 -->
        <div v-if="loadingMore" class="loading-more">
          <el-icon class="is-loading" color="#409EFF" :size="20">
            <Loading />
          </el-icon>
          <span>加载中...</span>
        </div>
        
        <!-- 没有更多数据 -->
        <div v-else-if="noMoreData && filteredReports.length > 0" class="no-more-data">
          <span>没有更多数据了</span>
        </div>
      </template>

      <el-empty v-else-if="!loadingMore" description="暂无日报" :image-size="80" />
    </div>

    <!-- 提交loading遮罩 - 移到弹窗外部 -->
      <div v-if="isSubmitting" class="submit-loading-overlay">
        <div class="loading-content">
          <el-icon class="loading-icon">
            <Loading />
          </el-icon>
          <span class="loading-text">正在提交日报，请稍候...</span>
        </div>
      </div>

    <!-- 日报详情弹窗 -->
    <el-drawer v-model="showReportDetail" direction="btt" size="100%" class="mobile-drawer" :modal="false"
      :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :with-header="false"
      :wrapper-closable="false" :destroy-on-close="false" :append-to-body="true" :lock-scroll="true" :z-index="2000"
      style="margin: 0 !important; padding: 0 !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important;">
      
      <!-- 简化的Header -->
      <div class="modern-drawer-header">
        <!-- 状态栏和关闭按钮 -->
        <div class="header-top">
          <div class="status-dot"></div>
          <span class="status-text">{{ isNewReport ? '正在创建' : '查看详情' }}</span>
          <el-button @click="showReportDetail = false" class="close-btn">
            <el-icon>
              <Close />
            </el-icon>
          </el-button>
        </div>
        
        <!-- 日期选择区域 -->
        <div v-if="isNewReport || isEdite" class="header-date-section">
          <el-date-picker v-model="currentReport.dailyDate" type="date" placeholder="选择日期" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" class="header-date-picker" :disabled="!isNewReport && !isEdite" />
        </div>
        
        <!-- 操作按钮 -->
        <div v-if="isNewReport" class="header-actions">
          <el-button @click="dailyType = 2; createDaily()" class="draft-btn" :loading="isSubmitting" :disabled="isSubmitting">
            <el-icon v-if="!isSubmitting">
              <Document />
            </el-icon>
            草稿
          </el-button>
          <el-button @click="dailyType = 1; createDaily()" class="submit-btn" :loading="isSubmitting" :disabled="isSubmitting">
            <el-icon v-if="!isSubmitting">
              <Check />
            </el-icon>
            提交
          </el-button>
        </div>
        
        <!-- 编辑模式操作按钮 -->
        <div v-else-if="isEdite" class="header-actions">
          <el-button @click="cancelEdit" class="cancel-btn">
            <el-icon>
              <Close />
            </el-icon>
            取消
          </el-button>
          <el-button @click="dailyType = 2; createDaily()" class="draft-btn" :loading="isSubmitting" :disabled="isSubmitting">
            <el-icon v-if="!isSubmitting">
              <Document />
            </el-icon>
            保存草稿
          </el-button>
          <el-button @click="dailyType = 1; createDaily()" class="submit-btn" :loading="isSubmitting" :disabled="isSubmitting">
            <el-icon v-if="!isSubmitting">
              <Check />
            </el-icon>
            提交
          </el-button>
        </div>
        
        <!-- 查看模式操作按钮 -->
        <div v-else class="header-actions">
          <el-button @click="editReport" class="edit-btn" v-if="canEditReport">
            <el-icon>
              <EditPen />
            </el-icon>
            编辑
          </el-button>
        </div>
      </div>
      <div class="modern-content-container">
        <!-- 已读人员列表 -->
        <div class="readers-container" v-if="readers.length > 0">
          <div class="readers-header">
            <el-icon class="content-icon">
              <User />
              </el-icon>
            <h2 class="content-title">已读人员</h2>
          </div>
          <div class="readers-list">
            <el-tag v-for="reader in readers" :key="reader.userUUID" class="reader-tag">
              {{ reader.userName }}
            </el-tag>
          </div>
        </div>

        <!-- 工作内容区域 -->
        <div class="work-content-section">
          <div class="section-header">
            <el-icon class="section-icon">
              <List />
            </el-icon>
            <h2 class="section-title">工作内容</h2>
            <el-button type="primary" size="small" @click="toggleComments" class="comment-btn">
              <el-icon>
                <ChatLineRound />
              </el-icon>
              评论 {{ comments.length }}
            </el-button>
          </div>

          <!-- 工作内容展示 -->
          <div class="work-items-grid" v-if="currentReport.workItems">
            <!-- 别人安排的工作 -->
            <div class="work-category" v-if="getWorkItemsByType(1).length > 0">
              <div class="category-header" @click="toggleWorkCategoryExpanded(1)">
                <el-icon class="category-icon">
                  <User />
                </el-icon>
                <h3 class="category-title">别人安排的工作</h3>
                <span class="category-count">{{ getWorkItemsByType(1).length }}</span>
                <el-icon class="expand-icon" :class="{ 'expanded': isWorkCategoryExpanded(1) }">
                  <ArrowDown />
                </el-icon>
              </div>
              <div v-show="isWorkCategoryExpanded(1)" class="work-items-container">
              <div v-for="(item, index) in getWorkItemsByType(1)" :key="`assigned-${index}`" class="work-item">
                  <div v-if="isNewReport || isEdite" class="work-item-edit">
                    <div class="work-item-header">
                    </div>
                    <div class="work-item-fields">
                      <div class="field-group">
                        <label class="field-label">项目名称 <span class="required">*</span></label>
                        <el-select v-model="item.itemId" placeholder="请选择项目" class="work-select" :disabled="true">
                          <el-option v-for="project in filteredProjects" :key="project.value" :label="project.label"
                            :value="project.value" />
                        </el-select>
                      </div>
                      <div class="field-group">
                        <label class="field-label">安排人 <span class="required">*</span></label>
                        <el-input v-model="item.assigner" placeholder="请输入安排人" class="work-input" :readonly="true" />
                      </div>
                      <div class="field-group">
                        <label class="field-label">工作内容 <span class="required">*</span></label>
                        <el-input v-model="item.content" type="textarea" :rows="5" placeholder="请输入工作内容"
                          class="work-input" :readonly="!isNewReport && !isEdite" />
                      </div>
                      <div class="field-group">
                        <label class="field-label">耗时(小时)</label>
                        <el-input-number v-model="item.timeSpent" :min="0" :precision="1" class="work-input" :disabled="!isNewReport && !isEdite" />
                      </div>
                      <div class="field-group">
                        <label class="field-label">完成状态 <span class="required">*</span></label>
                        <el-select v-model="item.result" placeholder="请选择完成状态" class="work-select" :disabled="!isNewReport && !isEdite">
                          <el-option label="未开始" :value="0" />
                          <el-option label="未完成" :value="1" />
                          <el-option label="完成" :value="2" />
                        </el-select>
                      </div>
                    </div>
                  </div>
                  <div v-else class="work-item-view">
                    <div class="work-item-content">
                      <div class="work-item-row">
                        <span class="work-item-label">项目名称：</span>
                        <span class="work-item-value">{{ getProjectName(item.itemId) }}</span>
                  </div>
                      <div class="work-item-row">
                        <span class="work-item-label">安排人：</span>
                        <span class="work-item-value">{{ item.assigner }}</span>
                </div>
                      <div class="work-item-row">
                        <span class="work-item-label">工作内容：</span>
                        <span class="work-item-value">{{ item.content }}</span>
                      </div>
                      <div class="work-item-row">
                        <span class="work-item-label">耗时：</span>
                        <span class="work-item-value">{{ item.timeSpent }}小时</span>
                      </div>
                      <div class="work-item-row">
                        <span class="work-item-label">完成状态：</span>
                        <span class="work-item-value">{{ getResultText(item.result) }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                </div>
              </div>
          
          <!-- 安排别人的工作 -->
            <div class="work-category" v-if="getWorkItemsByType(2).length > 0">
              <div class="category-header" @click="toggleWorkCategoryExpanded(2)">
                <el-icon class="category-icon">
                  <User />
                </el-icon>
                <h3 class="category-title">安排别人的工作</h3>
                <span class="category-count">{{ getWorkItemsByType(2).length }}</span>
                <el-icon class="expand-icon" :class="{ 'expanded': isWorkCategoryExpanded(2) }">
                  <ArrowDown />
                </el-icon>
              </div>
              <div v-show="isWorkCategoryExpanded(2)" class="work-items-container">
              <div v-for="(item, index) in getWorkItemsByType(2)" :key="`assigning-${index}`" class="work-item">
                  <div v-if="isNewReport || isEdite" class="work-item-edit">
                    <div class="work-item-header">
                    </div>
                    <div class="work-item-fields">
                      <div class="field-group">
                        <label class="field-label">项目名称 <span class="required">*</span></label>
                        <el-select v-model="item.itemId" placeholder="请选择项目" class="work-select" :disabled="true">
                          <el-option v-for="project in filteredProjects" :key="project.value" :label="project.label"
                            :value="project.value" />
                        </el-select>
                      </div>
                      <div class="field-group">
                        <label class="field-label">被安排人 <span class="required">*</span></label>
                        <el-input v-model="item.assigner" placeholder="请输入被安排人" class="work-input" :readonly="true" />
                      </div>
                      <div class="field-group">
                        <label class="field-label">工作内容 <span class="required">*</span></label>
                        <el-input v-model="item.content" type="textarea" :rows="5" placeholder="请输入工作内容"
                          class="work-input" :readonly="!isNewReport && !isEdite" />
                      </div>
                      <div class="field-group">
                        <label class="field-label">完成状态 <span class="required">*</span></label>
                        <el-select v-model="item.result" placeholder="请选择完成状态" class="work-select" :disabled="!isNewReport && !isEdite">
                          <el-option label="未开始" :value="0" />
                          <el-option label="未完成" :value="1" />
                          <el-option label="完成" :value="2" />
                        </el-select>
                      </div>
                      <div class="field-group" v-if="item.assignerResult !== undefined">
                        <label class="field-label">安排人结果</label>
                        <el-tag
                          :type="item.assignerResult === 2 ? 'success' : (item.assignerResult === 1 ? 'warning' : 'info')">
                          {{ getResultText(item.assignerResult) }}
                        </el-tag>
                      </div>
                    </div>
                  </div>
                  <div v-else class="work-item-view">
                    <div class="work-item-content">
                      <div class="work-item-row">
                        <span class="work-item-label">项目名称：</span>
                        <span class="work-item-value">{{ getProjectName(item.itemId) }}</span>
                  </div>
                      <div class="work-item-row">
                        <span class="work-item-label">被安排人：</span>
                        <span class="work-item-value">{{ item.assigner }}</span>
                  </div>
                      <div class="work-item-row">
                        <span class="work-item-label">工作内容：</span>
                        <span class="work-item-value">{{ item.content }}</span>
                      </div>
                      <div class="work-item-row">
                        <span class="work-item-label">完成状态：</span>
                        <span class="work-item-value">{{ getResultText(item.result) }}</span>
                      </div>
                      <div class="work-item-row" v-if="item.assignerResult !== undefined">
                        <span class="work-item-label">安排人结果：</span>
                        <span class="work-item-value">{{ getResultText(item.assignerResult) }}</span>
                      </div>
                    </div>
                  </div>
                  </div>
                </div>
              </div>

          <!-- 其他工作内容 -->
            <div class="work-category" v-if="isNewReport || getWorkItemsByType(3).length > 0">
              <div class="category-header" @click="toggleWorkCategoryExpanded(3)">
                <el-icon class="category-icon">
                  <Folder />
                </el-icon>
                <h3 class="category-title">其他工作内容（未在管理平台创建的任务）</h3>
                <span class="category-count">{{ getWorkItemsByType(3).length }}</span>
                <el-button v-if="isNewReport || isEdite" type="primary" @click.stop="addWorkItem(3)" size="small"
                  class="add-work-btn" :disabled="isSubmitting">
                  <el-icon>
                    <Plus />
                  </el-icon>
                  添加
                </el-button>
                <el-icon class="expand-icon" :class="{ 'expanded': isWorkCategoryExpanded(3) }">
                  <ArrowDown />
                </el-icon>
              </div>
              <div v-show="isWorkCategoryExpanded(3)" class="work-items-container">
              <div v-for="(item, index) in getWorkItemsByType(3)" :key="`other-${index}`" class="work-item">
                  <div v-if="isNewReport || isEdite" class="work-item-edit">
                    <div class="work-item-header">
                      <span></span>
                      <el-button type="danger" size="small" plain @click.stop="removeWorkItem(3, index)" :disabled="isSubmitting">删除</el-button>
                    </div>
                    <div class="work-item-fields">
                      <div class="field-group">
                        <label class="field-label">项目名称 <span class="required">*</span></label>
                        <el-select v-model="item.itemId" placeholder="请选择项目" class="work-select" filterable allow-create default-first-option :filter-method="filterProjects" :disabled="!isNewReport && !isEdite">
                          <el-option v-for="project in filteredProjectsList" :key="project.value" :label="project.label"
                            :value="project.value" />
                        </el-select>
                      </div>
                      <div class="field-group">
                        <label class="field-label">负责人 <span class="required">*</span></label>
                        <el-select v-model="item.assigner" placeholder="请选择负责人" class="work-select" filterable allow-create default-first-option :filter-method="filterStaff" :disabled="!isNewReport && !isEdite">
                          <el-option v-for="staff in filteredStaffList" :key="staff.id" :label="staff.name" :value="staff.name" />
                        </el-select>
                      </div>
                      <div class="field-group">
                        <label class="field-label">工作内容 <span class="required">*</span></label>
                        <el-input v-model="item.content" type="textarea" :rows="5" placeholder="请输入工作内容"
                          class="work-input" :readonly="!isNewReport && !isEdite" />
                      </div>
                      <div class="field-group">
                        <label class="field-label">耗时(小时)</label>
                        <el-input-number v-model="item.timeSpent" :min="0" :precision="1" class="work-input" :disabled="!isNewReport && !isEdite" />
                      </div>
                      <div class="field-group">
                        <label class="field-label">完成状态 <span class="required">*</span></label>
                        <el-select v-model="item.result" placeholder="请选择完成状态" class="work-select" :disabled="!isNewReport && !isEdite">
                          <el-option label="未开始" :value="0" />
                          <el-option label="未完成" :value="1" />
                          <el-option label="完成" :value="2" />
                        </el-select>
                      </div>
                    </div>
                  </div>
                  <div v-else class="work-item-view">
                    <div class="work-item-content">
                      <div class="work-item-row">
                        <span class="work-item-label">项目名称：</span>
                        <span class="work-item-value">{{ getProjectName(item.itemId) }}</span>
                  </div>
                      <div class="work-item-row">
                        <span class="work-item-label">负责人：</span>
                        <span class="work-item-value">{{ item.assigner }}</span>
                </div>
                      <div class="work-item-row">
                        <span class="work-item-label">工作内容：</span>
                        <span class="work-item-value">{{ item.content }}</span>
                      </div>
                      <div class="work-item-row">
                        <span class="work-item-label">耗时：</span>
                        <span class="work-item-value">{{ item.timeSpent }}小时</span>
                      </div>
                      <div class="work-item-row">
                        <span class="work-item-label">完成状态：</span>
                        <span class="work-item-value">{{ getResultText(item.result) }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                </div>
              </div>

            <!-- 每周与市场部沟通事宜 -->
            <div class="work-category" v-if="isNewReport || getWorkItemsByType(4).length > 0">
              <div class="category-header" @click="toggleWorkCategoryExpanded(4)">
                <el-icon class="category-icon">
                  <ChatDotRound />
                </el-icon>
                <h3 class="category-title">每周与市场部沟通事宜（项目经理填写）</h3>
                <span class="category-count">{{ getWorkItemsByType(4).length }}</span>
                <el-button v-if="isNewReport" type="primary" @click.stop="addWorkItem(4)" size="small"
                  class="add-work-btn" :disabled="isSubmitting">
                  <el-icon>
                    <Plus />
                  </el-icon>
                  添加
                </el-button>
                <el-icon class="expand-icon" :class="{ 'expanded': isWorkCategoryExpanded(4) }">
                  <ArrowDown />
                </el-icon>
              </div>
              <div v-show="isWorkCategoryExpanded(4)" class="work-items-container">
              <div v-for="(item, index) in getWorkItemsByType(4)" :key="`market-${index}`" class="work-item">
                  <div v-if="isNewReport" class="work-item-edit">
                    <div class="work-item-header">
                      <span></span>
                      <el-button type="danger" size="small" plain @click.stop="removeWorkItem(4, index)" :disabled="isSubmitting">删除</el-button>
                    </div>
                    <div class="work-item-fields">
                      <div class="field-group">
                        <label class="field-label">项目名称 <span class="required">*</span></label>
                        <el-select v-model="item.itemId" placeholder="请选择项目" class="work-select" filterable allow-create default-first-option :filter-method="filterProjects">
                          <el-option v-for="project in filteredProjectsList" :key="project.value" :label="project.label"
                            :value="project.value" />
                        </el-select>
                      </div>
                      <div class="field-group">
                        <label class="field-label">沟通对象 <span class="required">*</span></label>
                        <el-select v-model="item.assigner" placeholder="请选择沟通对象" class="work-select" filterable allow-create default-first-option :filter-method="filterStaff">
                          <el-option v-for="staff in filteredStaffList" :key="staff.id" :label="staff.name" :value="staff.name" />
                        </el-select>
                      </div>
                      <div class="field-group">
                        <label class="field-label">沟通内容 <span class="required">*</span></label>
                        <el-input v-model="item.content" type="textarea" :rows="5" placeholder="请输入沟通内容"
                          class="work-input" />
                      </div>
                      <div class="field-group">
                        <label class="field-label">完成状态 <span class="required">*</span></label>
                        <el-select v-model="item.result" placeholder="请选择完成状态" class="work-select">
                          <el-option label="未开始" :value="0" />
                          <el-option label="未完成" :value="1" />
                          <el-option label="完成" :value="2" />
                        </el-select>
                      </div>
                    </div>
                  </div>
                  <div v-else class="plain-text-item">
                    <span class="plain-text-content">
                      【{{ getProjectName(item.itemId) }}】与【{{ item.assigner.replace(/\n/g, '') }}】沟通【{{
                        item.content.replace(/\n/g, '') }}】
                    结果【{{ getResultText(item.result) }}】
                </span>
                  </div>
                  </div>
                </div>
              </div>

          <!-- 标注内容 -->
            <div class="work-category" v-if="isNewReport || getWorkItemsByType(5).length > 0">
              <div class="category-header" @click="toggleWorkCategoryExpanded(5)">
                <el-icon class="category-icon">
                  <EditPen />
                </el-icon>
                <h3 class="category-title">标注内容：和甲方发生的无法报工作量的事宜（技术负责人，项目经理填写）</h3>
                <span class="category-count">{{ getWorkItemsByType(5).length }}</span>
                <el-button v-if="isNewReport" type="primary" @click.stop="addWorkItem(5)" size="small"
                  class="add-work-btn" :disabled="isSubmitting">
                  <el-icon>
                    <Plus />
                  </el-icon>
                  添加
                </el-button>
                <el-icon class="expand-icon" :class="{ 'expanded': isWorkCategoryExpanded(5) }">
                  <ArrowDown />
                </el-icon>
              </div>
              <div v-show="isWorkCategoryExpanded(5)" class="work-items-container">
              <div v-for="(item, index) in getWorkItemsByType(5)" :key="`annotation-${index}`" class="work-item">
                  <div v-if="isNewReport" class="work-item-edit">
                    <div class="work-item-header">
                      <span></span>
                      <el-button type="danger" size="small" plain @click.stop="removeWorkItem(5, index)" :disabled="isSubmitting">删除</el-button>
                    </div>
                    <div class="work-item-fields">
                      <div class="field-group">
                        <label class="field-label">项目名称 <span class="required">*</span></label>
                        <el-select v-model="item.itemId" placeholder="请选择项目" class="work-select" filterable allow-create default-first-option :filter-method="filterProjects">
                          <el-option v-for="project in filteredProjectsList" :key="project.value" :label="project.label"
                            :value="project.value" />
                        </el-select>
                      </div>
                      <div class="field-group">
                        <label class="field-label">处理对象 <span class="required">*</span></label>
                        <el-select v-model="item.assigner" placeholder="请选择处理对象" class="work-select" filterable allow-create default-first-option :filter-method="filterStaff">
                          <el-option v-for="staff in filteredStaffList" :key="staff.id" :label="staff.name" :value="staff.name" />
                        </el-select>
                      </div>
                      <div class="field-group">
                        <label class="field-label">处理内容 <span class="required">*</span></label>
                        <el-input v-model="item.content" type="textarea" :rows="5" placeholder="请输入处理内容"
                          class="work-input" />
                      </div>
                      <div class="field-group">
                        <label class="field-label">完成状态 <span class="required">*</span></label>
                        <el-select v-model="item.result" placeholder="请选择完成状态" class="work-select">
                          <el-option label="未开始" :value="0" />
                          <el-option label="未完成" :value="1" />
                          <el-option label="完成" :value="2" />
                        </el-select>
                      </div>
                    </div>
                  </div>
                  <div v-else class="plain-text-item">
                    <span class="plain-text-content">
                      【{{ getProjectName(item.itemId) }}】与【{{ item.assigner.replace(/\n/g, '') }}】处理【{{
                        item.content.replace(/\n/g, '') }}】
                    结果【{{ getResultText(item.result) }}】
                </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 工作内容展示 -->
        </div> <!-- 结束 work-content-section -->

        <!-- 切换loading提示 -->
        <div class="switching-loading" v-if="switchingLoading">
          <div class="loading-content">
            <el-icon class="loading-icon">
              <Loading />
            </el-icon>
            <span class="loading-text">{{ switchingMessage }}</span>
              </div>
                  </div>
                  
        <!-- 切换气泡 -->
        <div class="switch-bubble" v-if="showSwitchBubble" :class="`switch-bubble-${switchBubblePosition}`">
          <div class="bubble-content" @click="handleBubbleClick">
            <el-icon class="bubble-icon">
              <ArrowUp v-if="switchBubblePosition === 'top'" />
              <ArrowDown v-if="switchBubblePosition === 'bottom'" />
            </el-icon>
            <span class="bubble-text">
              {{ switchBubblePosition === 'top' ? '上一篇' : '下一篇' }}
            </span>
            </div>
          </div>
          
      </div>
    </el-drawer>

    <!-- 移动端评论模态框 -->
    <MobileCommentModal v-model="showMobileCommentModal" :report-id="currentReport.ID || 0"
      :current-user="currentReport.userName || ''" @comment-submitted="handleMobileCommentSubmitted" />

    <!-- 日报编辑界面已移除 -->
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
import {
  Search,
  ChatLineRound,
  Loading,
  Calendar,
  OfficeBuilding,
  User,
  List,
  ArrowUp,
  ArrowDown,
  Close,
  Plus,
  Document,
  Check,
  Folder,
  ChatDotRound,
  EditPen
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  GetItemList,
  GetDailyUserListByDepartment,
  GetDailyList,
  GetDailyById,
  GetToComments,
  CreateDaily,
  GetMyDailyOneToMany
} from "@/api/newDemands/index";
import useUserStore from '@/store/modules/user'
import MobileCommentModal from '@/components/requirement/MobileCommentModal.vue'
// 已移除 CreateDailyModal 相关功能

// 用户store
const userStore = useUserStore()

// 路由（本页不需要）

// 状态管理
const activeTab = ref<'1' | '2' | '3'>('1')
const activeReportId = ref<number>(0)
const showReportDetail = ref(false)
const currentReportIndex = ref<number>(-1)
const isAutoSwitching = ref(false)
const detailScrollHandler = ref<((event: Event) => void) | null>(null)
const scrollTimeout = ref<number | null>(null)
const justSwitched = ref(false)
const switchingLoading = ref(false)
const switchingMessage = ref('')
const showSwitchBubble = ref(false)
const switchBubblePosition = ref<'top' | 'bottom' | null>(null)

// 筛选条件
const searchKeyword = ref('')
const selectedMonth = ref('')
const selectedDepartment = ref('all')
const selectedAuthor = ref('all')

// 分页
const loadingMore = ref(false)
const noMoreData = ref(false)
const pageSize = ref(10)
const currentPage = ref(1)

// 提交状态
const isSubmitting = ref(false)

// 加载日报详情状态
const isLoadingReport = ref(false)

// 数据
const reports = ref<any[]>([])
const currentReport = ref<any>({
  ID: 0,
  dailyType: 1,
  dailyDate: new Date().toISOString().split('T')[0],
  createAt: new Date().toISOString().split('T')[0],
  status: 2,
  author: '',
  workItems: [],
  itemDailyChecks: [],
  summary: ''
})

// 项目列表
const filteredProjects = ref<any[]>([])
const filteredProjectsList = ref<any[]>([])

// 员工列表
interface Staff {
  id: string
  name: string
  department: string
}
const staffList = ref<Staff[]>([])
const filteredStaffList = ref<Staff[]>([])

// 过滤项目列表
const filterProjects = (query: string) => {
  if (query) {
    filteredProjectsList.value = filteredProjects.value.filter(project => 
      project.label.toLowerCase().includes(query.toLowerCase())
    )
  } else {
    filteredProjectsList.value = filteredProjects.value
  }
}

// 过滤员工列表
const filterStaff = (query: string) => {
  if (query) {
    filteredStaffList.value = staffList.value.filter(staff => 
      staff.name.toLowerCase().includes(query.toLowerCase())
    )
  } else {
    filteredStaffList.value = staffList.value
  }
}

// 已读人员列表
const readers = ref<any[]>([])

// 评论相关
const comments = ref<any[]>([])
const commentsLoading = ref(false)
const showMobileCommentModal = ref(false)

// 编辑日报功能
const editReport = () => {
  // 检查是否可以编辑
  if (!canEditReport.value) {
    if (currentReport.value.dailyType === 1) {
      ElMessage.warning('已提交的日报只能编辑创建后两天内的日志')
    } else {
      ElMessage.warning('无法编辑该日报')
    }
    return
  }

  // 进入编辑模式
  isEdite.value = true
  isViewMode.value = false
  isReturn.value = true
  
  // 加载可选工作项
  getMyDailyOneToMany()
}

// 取消编辑
const cancelEdit = () => {
  isReturn.value = false
  isEdite.value = false
  isViewMode.value = true
  
  // 重新加载日报详情
  if (activeReportId.value) {
    loadReport(activeReportId.value)
  }
}

// 判断是否可以编辑日报
const canEditReport = computed(() => {
  if (!currentReport.value.createAt) return false

  const createDate = new Date(currentReport.value.createAt)
  createDate.setHours(0, 0, 0, 0)
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  const minDate = new Date(today)
  minDate.setDate(minDate.getDate() - 2)

  // 草稿箱中的日报：可以编辑，不限制天数
  if (currentReport.value.dailyType === 2) {
    return true
  }

  // 已提交中的日报：可以编辑，但限制只能编辑创建后两天内的日志
  if (currentReport.value.dailyType === 1) {
    return createDate.getTime() >= minDate.getTime() && createDate.getTime() <= today.getTime()
  }

  return false
})

// 移动端交互相关
const isKeyboardOpen = ref(false)

// 工作类型展开状态管理
const workCategoryExpanded = ref<Record<number, boolean>>({})

// 创建日报相关状态
const isNewReport = ref(false)
const isInitializing = ref(false)
const isEdite = ref(false)
const isViewMode = ref(false)
const isReturn = ref(false)
const showCommentSection = ref(false)
const dailyType = ref(2) // 1: 已提交, 2: 草稿


// 自动保存功能已移除

// 防回弹相关（仅绑定在可滚动容器上，使用夹值钩子防到达极值）
const bounceStartY = ref<number>(0)
let bounceTargetEl: HTMLElement | null = null
let preventBounceMoveHandler: ((e: TouchEvent) => void) | null = null
let preventBounceStartHandler: ((e: TouchEvent) => void) | null = null
let bounceScrollHandler: ((e: Event) => void) | null = null

const clampScrollable = (el: HTMLElement) => {
  // 若未溢出则不处理
  if (el.scrollHeight <= el.clientHeight) return
  if (el.scrollTop <= 0) {
    el.scrollTop = 1
  } else if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
    el.scrollTop = el.scrollHeight - el.clientHeight - 1
  }
}

const addBounceGuards = () => {
  bounceTargetEl = document.querySelector('.edit-content') as HTMLElement | null
  const drawerBody = document.querySelector('.mobile-edit-drawer .el-drawer__body') as HTMLElement | null
  // 优先内容区，其次drawer body
  const targets: HTMLElement[] = []
  if (bounceTargetEl) targets.push(bounceTargetEl)
  if (drawerBody) targets.push(drawerBody)
  if (targets.length === 0) return
  // 初始夹值，防止一开始就在极值
  targets.forEach(t => clampScrollable(t))

  // 记录起始触点
  preventBounceStartHandler = (e: TouchEvent) => {
    if (e.touches && e.touches.length > 0) {
      bounceStartY.value = e.touches[0].clientY
      // 在触摸开始时夹住滚动位置，避免一上来就处于极值
      if (bounceTargetEl) clampScrollable(bounceTargetEl)
    }
  }

  // 阻止在边界的橡皮筋回弹，仅在目标容器内处理
  preventBounceMoveHandler = (e: TouchEvent) => {
    // 编辑功能已移除，直接返回
    return
    if (e.touches.length !== 1) return

    const touch = e.touches[0]
    const deltaY = touch.clientY - bounceStartY.value
    const containers = targets
    for (const c of containers) {
      const atTop = c.scrollTop <= 0
      const atBottom = c.scrollHeight - c.scrollTop <= c.clientHeight + 1
      if ((atTop && deltaY > 0) || (atBottom && deltaY < 0)) {
        e.preventDefault()
        break
      }
    }
  }

  // 在滚动过程中也持续夹住，防止到达极值（仅在即将越界时处理，避免卡住）
  bounceScrollHandler = () => {
    const c = bounceTargetEl as HTMLElement | null
    if (!c) return
    const atTop = c.scrollTop <= 0
    const atBottom = c.scrollTop + c.clientHeight >= c.scrollHeight
    if (atTop) c.scrollTop = 1
    else if (atBottom) c.scrollTop = c.scrollHeight - c.clientHeight - 1
  }

  targets.forEach(t => {
    t.addEventListener('touchstart', preventBounceStartHandler as EventListenerOrEventListenerObject, { passive: false })
    t.addEventListener('touchmove', preventBounceMoveHandler as EventListenerOrEventListenerObject, { passive: false })
    t.addEventListener('scroll', bounceScrollHandler as EventListenerOrEventListenerObject, { passive: true })
  })
}

const removeBounceGuards = () => {
  const toRemove: (HTMLElement | null)[] = [bounceTargetEl, document.querySelector('.mobile-edit-drawer .el-drawer__body') as HTMLElement | null]
  toRemove.forEach(t => {
    if (!t) return
    if (preventBounceStartHandler) t.removeEventListener('touchstart', preventBounceStartHandler as unknown as EventListener)
    if (preventBounceMoveHandler) t.removeEventListener('touchmove', preventBounceMoveHandler as unknown as EventListener)
    if (bounceScrollHandler) t.removeEventListener('scroll', bounceScrollHandler as unknown as EventListener)
  })
  bounceTargetEl = null
  preventBounceStartHandler = null
  preventBounceMoveHandler = null
  bounceScrollHandler = null
}

// 编辑区域尺寸计算已移除


// 工作项接口
// 删除工作项功能已移除

// 可选未完成安排需求已移除

// 月份选项
const months = computed(() => {
  const months = []
  const currentDate = new Date()
  const currentYear = currentDate.getFullYear()

  for (let i = 0; i < 12; i++) {
    const month = new Date(currentYear, i, 1)
    const value = `${month.getFullYear()}-${(month.getMonth() + 1).toString().padStart(2, '0')}`
    const label = `${month.getFullYear()}年${month.getMonth() + 1}月`
    months.push({ value, label })
  }

  return months
})

// 过滤后的日报列表 - 现在使用服务端分页，直接返回reports
const filteredReports = computed(() => {
  return reports.value || []
})

// 获取项目列表
const getItemList = async () => {
  const { data } = await GetItemList()
  if (data.code == 200) {
    filteredProjects.value = data.data.map((item: any) => ({
      value: item.ID,
      label: item.itemName,
    }))
    filteredProjectsList.value = filteredProjects.value
  } else {
    ElMessage.error(data.msg)
  }
}

// 获取用户列表
const getAllUsers = async () => {
  const { data } = await GetDailyUserListByDepartment('all')
  if (data.code == 200) {
    staffList.value = data.data.map((item: any) => ({
      id: item.uuid,
      name: item.userName,
      department: item.department
    }))
    filteredStaffList.value = staffList.value
    console.log('获取到的用户列表:', staffList.value)
  } else {
    ElMessage.error(data.msg)
  }
}

//获取可选未完成安排需求
const getMyDailyOneToMany = async () => {
  console.log('getMyDailyOneToMany 开始执行')
  try {
    const { data } = await GetMyDailyOneToMany()
    console.log('API响应:', data)
    if (data.code === 200) {
      // 获取当前已存在的工作项ID集合，使用 cardId + workType 组合作为唯一标识
      const existingItems = new Set<string>();
      if (currentReport.value.workItems) {
        currentReport.value.workItems.forEach((item: any) => {
          if (item.cardId) {
            existingItems.add(`${item.cardId}_${item.workType}`);
          }
        });
      }

      let addedCount = 0;

      // 添加别人安排的工作（只添加未存在的）
      if (data.data.assignedTasks && data.data.assignedTasks.length > 0) {
        console.log('处理assignedTasks:', data.data.assignedTasks.length)
        data.data.assignedTasks.forEach((task: any) => {
          const uniqueId = `${task.cardId}_1`; // 1 表示别人安排的工作类型
          if (!existingItems.has(uniqueId)) {
            if (task.isTrue1 == 1) {
              currentReport.value.workItems.push({
                workType: 1,
                itemId: task.projectId,
                assigner: task.assigner,
                content: `${task.title}\n${task.content}`,
                timeSpent: String(task.timeSpent),
                result: mapApiResultToInternal(task.isTrue1),
                cardId: task.cardId
              });
            } else if (task.isTrue1 == 2) {
              currentReport.value.workItems.push({
                workType: 1,
                itemId: task.projectId,
                assigner: task.assigner,
                content: `${task.title}\n${task.content}`,
                timeSpent: String(task.timeSpent || 0),
                result: mapApiResultToInternal(task.isTrue1),
                cardId: task.cardId
              });
            } else {
              currentReport.value.workItems.push({
                workType: 1,
                itemId: task.projectId,
                assigner: task.assigner,
                content: `${task.title}\n${task.content}`,
                timeSpent: String(task.timeSpent || 0),
                result: mapApiResultToInternal(task.isTrue1),
                cardId: task.cardId
              });
            }

            existingItems.add(uniqueId);
            addedCount++;
          }
        });
      }

      // 添加安排别人的工作（只添加未存在的），按 isTrue2 作为默认结果
      if (data.data.assigningTasks && data.data.assigningTasks.length > 0) {
        console.log('处理assigningTasks:', data.data.assigningTasks.length)
        data.data.assigningTasks.forEach((task: any) => {
          const uniqueId = `${task.cardId}_2`; // 2 表示安排别人的工作类型
          if (!existingItems.has(uniqueId)) {
            if (task.isTrue2 == 1) {
              currentReport.value.workItems.push({
                workType: 2,
                itemId: task.projectId,
                assigner: task.assigner,
                content: `${task.title}\n${task.content}`,
                timeSpent: String(task.timeSpent || 0),
                result: mapApiResultToInternal(task.isTrue2),
                assignerResult: mapApiResultToInternal(task.isTrue1),
                cardId: task.cardId
              });
            } else if (task.isTrue2 == 2) {
              currentReport.value.workItems.push({
                workType: 2,
                itemId: task.projectId,
                assigner: task.assigner,
                content: `${task.title}\n${task.content}`,
                timeSpent: String(task.timeSpent || 0),
                result: mapApiResultToInternal(task.isTrue2),
                assignerResult: mapApiResultToInternal(task.isTrue1),
                cardId: task.cardId
              });
            } else {
              currentReport.value.workItems.push({
                workType: 2,
                itemId: task.projectId,
                assigner: task.assigner,
                content: `${task.title}\n${task.content}`,
                timeSpent: String(task.timeSpent || 0),
                result: mapApiResultToInternal(task.isTrue2),
                assignerResult: mapApiResultToInternal(task.isTrue1),
                cardId: task.cardId
              });
            }
            existingItems.add(uniqueId);
            addedCount++;
          }
        });
      }
      
      console.log('getMyDailyOneToMany 完成，工作项数量:', currentReport.value.workItems.length)
    } else {
      console.error('API错误:', data.msg)
    }
  } catch (error: any) {
    console.error('getMyDailyOneToMany 异常:', error)
  }
}


// 获取日报列表
const getDailyList = async (loadMore = false) => {
  if (loadMore) {
    if (loadingMore.value || noMoreData.value) return
    loadingMore.value = true
    currentPage.value += 1
  } else {
    currentPage.value = 1
    noMoreData.value = false
  }

  try {
  const { data } = await GetDailyList({
      searchKeyword: searchKeyword.value || '',
      selectedDepartment: activeTab.value === '3' ? selectedDepartment.value : '',
      monthTime: selectedMonth.value || '',
      userName: activeTab.value === '3' ? selectedAuthor.value : '',
      dailyType: activeTab.value === '3' ? 3 : (activeTab.value === '1' ? 2 : 1),
      page: currentPage.value,
      pageSize: pageSize.value
  })

  if (data.code == 200) {
      if (loadMore) {
        // 追加数据
        reports.value = [...reports.value, ...(data.data || [])]
  } else {
        // 全新加载
        reports.value = data.data || []
      }

      // 检查是否还有更多数据
      noMoreData.value = (data.data || []).length < pageSize.value
    } else {
      console.error('获取日报列表失败:', data.msg);
      ElMessage.error(data.msg || '获取日报列表失败')
      // 如果获取失败，至少显示空数组，避免undefined
      if (!loadMore) {
        reports.value = []
      }
    }
  } catch (error: any) {
    console.error('获取日报列表异常:', error);
    ElMessage.error('获取日报列表失败，请检查网络连接');
    // 如果获取失败，至少显示空数组，避免undefined
    if (!loadMore) {
      reports.value = []
    }
  } finally {
    loadingMore.value = false
  }
}

// 加载日报详情
const loadReport = async (id: number) => {
  isLoadingReport.value = true
  try {
    const { data } = await GetDailyById(id)
    if (data.code == 200) {
      currentReport.value = data.data
      activeReportId.value = id
      
      // 设置为查看模式
      isEdite.value = false
      isViewMode.value = true
      isReturn.value = false
      
      // 记录当前日报在列表中的索引
      const reportIndex = reports.value.findIndex(r => r.ID === id)
      currentReportIndex.value = reportIndex
      
      // 滚动到详情页面顶部并绑定滚动事件
      nextTick(() => {
        const drawerBody = document.querySelector('.mobile-drawer .el-drawer__body')
        if (drawerBody) {
          drawerBody.scrollTop = 0
          
          // 移除之前的监听器（如果存在）
          if (detailScrollHandler.value) {
            drawerBody.removeEventListener('scroll', detailScrollHandler.value)
          }
          
          // 创建新的滚动处理函数
          detailScrollHandler.value = handleDetailScroll
          
          // 添加新的滚动监听器
          drawerBody.addEventListener('scroll', detailScrollHandler.value)
        }
      })

      // 更新列表中的对应日报
      if (reportIndex !== -1) {
        reports.value[reportIndex].itemDailyChecks = data.data.itemDailyChecks || []
      }

      // 如果当前用户不是日报作者，且还没有标记为已读，则标记为已读
      if (data.data.userName !== userStore.userInfo.nickName &&
          !isReportRead(currentReport.value)) {
        // 添加当前用户到已读列表
        const newCheck = {
          ID: Date.now(), // 临时ID
          userName: userStore.userInfo.nickName,
          userUUID: userStore.userInfo.uuid,
          checkDailyId: String(data.data.ID),
          checkDailyDate: formatCurrentTime(),
          createAt: formatCurrentTime(),
          UpdatedAt: formatCurrentTime()
        };

        currentReport.value.itemDailyChecks.push(newCheck);

        // 更新列表中的对应日报
        if (reportIndex !== -1) {
          reports.value[reportIndex].itemDailyChecks.push(newCheck);
        }
      }

      // 更新已读人员列表
      readers.value = data.data.itemDailyChecks || []

      // 加载评论
      getComments()
      
      // 数据加载完成后再显示弹窗
      showReportDetail.value = true
    } else {
      ElMessage.error(data.msg)
    }
  } catch (error) {
    ElMessage.error('加载日报失败')
    console.error(error)
  } finally {
    isLoadingReport.value = false
  }
}

// 获取评论
const getComments = async () => {
  if (!activeReportId.value) return

  commentsLoading.value = true
  try {
    const { data } = await GetToComments(activeReportId.value)
    if (data.code === 200) {
      comments.value = data.data || []
    }
  } catch (error) {
    console.error('获取评论失败:', error)
  } finally {
    commentsLoading.value = false
  }
}

// 切换评论显示
const toggleComments = () => {
  showMobileCommentModal.value = true
}

// 处理移动端评论提交
const handleMobileCommentSubmitted = () => {
  // 重新加载评论
  getComments()
}

// 初始化创建内容
const createNewReport = async () => {
  console.log('createNewReport 被调用')
  isInitializing.value = true;
  
  try {
    console.log('开始创建新日报')
    
    const today = new Date().toISOString().split('T')[0]
    currentReport.value = {
      ID: 0,
      dailyType: 2,
      dailyDate: today,
      createAt: today,
      status: 2,
      author: '',
      workItems: [],
      itemDailyChecks: [],
      summary: ''
    }
    activeReportId.value = 0;
    isNewReport.value = true;
    isEdite.value = false;
    isViewMode.value = false;
    // 新增日报时隐藏评论区域
    showCommentSection.value = false;
    
    console.log('状态设置完成，开始加载可选需求')
    
    // 加载可选未完成安排需求
    await getMyDailyOneToMany();
    
    console.log('可选需求加载完成，显示弹窗')
    
    // 显示日报详情弹窗
    showReportDetail.value = true;
    
    // 滚动到详情页面顶部
    nextTick(() => {
      const drawerBody = document.querySelector('.mobile-drawer .el-drawer__body')
      if (drawerBody) {
        drawerBody.scrollTop = 0
      }
    })
    console.log('createNewReport 完成')
  } catch (error) {
    console.error('createNewReport 错误:', error)
    ElMessage.error('创建日报失败，请重试')
  } finally {
    isInitializing.value = false;
  }
}

// 提交日报
const createDaily = async () => {
  if (isSubmitting.value) return false;
  
  try {
    isSubmitting.value = true;
    
    // 检查日报日期是否早于当前时间前3天
    const reportDate = new Date(currentReport.value.dailyDate);
    const threeDaysAgo = new Date();
    threeDaysAgo.setDate(threeDaysAgo.getDate() - 3);
    threeDaysAgo.setHours(0, 0, 0, 0);

    if (reportDate < threeDaysAgo) {
      try {
        await ElMessageBox.confirm(
          '日报超过3天,消耗一次补交次数,是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        );
      } catch {
        isSubmitting.value = false;
        return false;
      }
    }

    // 确保 timeSpent 字段为字符串类型
    const workItemsForSubmit = currentReport.value.workItems.map((item: any) => ({
      ...item,
      timeSpent: String(item.timeSpent || 0)
    }));

    const { data } = await CreateDaily({
      "dailyId": activeReportId.value,
      "dailyType": dailyType.value,
      "dailyDate": currentReport.value.dailyDate,
      "itemDailyList": workItemsForSubmit
    });

    if (data.code == 200) {
      getDailyList();
      isEdite.value = true;
      activeTab.value = dailyType.value === 1 ? '2' : '1';
      ElMessage.success(data.msg);
      showReportDetail.value = false;
      isNewReport.value = false;
      return true;
    } else {
      ElMessage.error(data.msg);
      return false;
    }
  } catch (error) {
    console.error('提交日报失败:', error);
    ElMessage.error('提交失败，请重试');
    return false;
  } finally {
    isSubmitting.value = false;
  }
}

// 获取可选未完成安排需求功能已移除

// 校验与错误状态功能已移除

// 保存/提交日报功能已移除

// 获取工作项按类型分组
const getWorkItemsByType = (workType: number) => {
  if (!currentReport.value.workItems) return []
  return currentReport.value.workItems.filter((item: any) => item.workType === workType)
}

// 切换工作类型展开/折叠状态
const toggleWorkCategoryExpanded = (workType: number) => {
  // 如果当前状态是undefined（默认展开），则设置为false（折叠）
  // 如果当前状态是false（折叠），则设置为true（展开）
  // 如果当前状态是true（展开），则设置为false（折叠）
  const currentState = workCategoryExpanded.value[workType]
  if (currentState === undefined || currentState === true) {
    workCategoryExpanded.value[workType] = false
  } else {
    workCategoryExpanded.value[workType] = true
  }
}

// 检查工作类型是否展开
const isWorkCategoryExpanded = (workType: number) => {
  // 默认展开，只有明确设置为false时才折叠
  return workCategoryExpanded.value[workType] !== false
}


// 添加工作项
const addWorkItem = (workType: 1 | 2 | 3 | 4 | 5) => {
  const newItem = {
    workType,
    itemId: filteredProjects.value.length > 0 ? filteredProjects.value[0].value : 0,
    assigner: '',
    content: '',
    timeSpent: '0',
    result: 0 as 0 | 1 | 2,
    cardId: undefined
  }

  if (!currentReport.value.workItems) {
    currentReport.value.workItems = []
  }

  currentReport.value.workItems.push(newItem)
}


// 已清空创建编辑功能

// 已清空创建编辑功能


// 获取结果文本
const getResultText = (result: number) => {
  switch (result) {
    case 0: return '未开始'
    case 1: return '未完成'
    case 2: return '完成'
    default: return '未知状态'
  }
}

const mapApiResultToInternal = (raw: any): 0 | 1 | 2 => {
  const val = Number(raw ?? 0);
  if (val === 0 || val === 1 || val === 2) return val as 0 | 1 | 2;
  return 0;
};

// 获取项目名称
const getProjectName = (itemId: number) => {
  const project = filteredProjects.value.find(p => p.value === itemId);
  return project ? project.label : '未知项目';
};


// 已清空创建编辑功能

// 已清空创建编辑功能

// 已清空创建编辑功能

// 已清空创建编辑功能

// 结果映射已移除


// 格式化当前时间
const formatCurrentTime = () => {
  const now = new Date()
  return now.toISOString().replace('T', ' ').substring(0, 19)
}

// 判断日报是否已读的方法
const isReportRead = (report: any): boolean => {
  // 确保用户信息已加载
  if (!userStore.userInfo.nickName) {
    return false;
  }

  // 如果当前用户是日报作者，则认为是已读
  if (report.userName === userStore.userInfo.nickName) {
    return true;
  }

  // 检查是否有已读记录，并且当前用户在其中
  if (report.itemDailyChecks && report.itemDailyChecks.length > 0) {
    const isRead = report.itemDailyChecks.some((check: any) =>
      check.userName === userStore.userInfo.nickName
    );
    return isRead;
  }

  return false;
};

// 格式化日期
const formatMobileDate = (dateString: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return `${date.getMonth() + 1}月${date.getDate()}日`
}

// 格式化日期 - PC端格式
const formatDate = (dateString: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
}

// 搜索功能
const handleSearch = () => {
  getDailyList()
}

// 滚动加载更多
const handleScroll = (event: Event) => {
  const container = event.target as HTMLElement
  if (!container) return

  // 检查是否滚动到底部
  const { scrollTop, scrollHeight, clientHeight } = container
  if (scrollHeight - scrollTop <= clientHeight + 50 && !loadingMore.value && !noMoreData.value) {
    getDailyList(true)
  }
}

// 详情页面滚动监听
const handleDetailScroll = (event: Event) => {
  const container = event.target as HTMLElement
  if (!container || isAutoSwitching.value || justSwitched.value) return

  // 清除之前的定时器
  if (scrollTimeout.value) {
    clearTimeout(scrollTimeout.value)
  }

  // 使用防抖机制，避免频繁触发
  scrollTimeout.value = setTimeout(() => {
    // 检查滚动位置
    const { scrollTop, scrollHeight, clientHeight } = container
    const isAtBottom = scrollHeight - scrollTop <= clientHeight + 50
    const isAtTop = scrollTop <= 50
    
    // 调试信息
    console.log('滚动检测:', {
      scrollTop,
      scrollHeight,
      clientHeight,
      isAtBottom,
      isAtTop,
      currentReportIndex: currentReportIndex.value,
      isAutoSwitching: isAutoSwitching.value,
      justSwitched: justSwitched.value,
      reportsLength: reports.value.length
    })


    if (isAtBottom && currentReportIndex.value >= 0 && !isAutoSwitching.value && !justSwitched.value) {
      // 显示底部切换气泡
      if (!showSwitchBubble.value || switchBubblePosition.value !== 'bottom') {
        showSwitchBubble.value = true
        switchBubblePosition.value = 'bottom'
        console.log('显示底部切换气泡')
      }
    } else if (isAtTop && currentReportIndex.value > 0 && !isAutoSwitching.value && !justSwitched.value) {
      // 显示顶部切换气泡
      if (!showSwitchBubble.value || switchBubblePosition.value !== 'top') {
        showSwitchBubble.value = true
        switchBubblePosition.value = 'top'
        console.log('显示顶部切换气泡')
      }
    } else {
      // 不在边缘，隐藏气泡
      if (showSwitchBubble.value) {
        showSwitchBubble.value = false
        switchBubblePosition.value = null
        console.log('隐藏切换气泡')
      }
    }
  }, 100) // 100ms 防抖
}

// 处理气泡点击
const handleBubbleClick = () => {
  console.log('气泡点击:', switchBubblePosition.value)
  
  if (switchBubblePosition.value === 'top') {
    // 点击顶部气泡，切换到上一个
    switchToPreviousReport()
  } else if (switchBubblePosition.value === 'bottom') {
    // 点击底部气泡，切换到下一个
    switchToNextReport()
  }
  
  // 隐藏气泡
  showSwitchBubble.value = false
  switchBubblePosition.value = null
}

// 切换到下一个日报
const switchToNextReport = async () => {
  console.log('switchToNextReport 调用:', {
    isAutoSwitching: isAutoSwitching.value,
    currentReportIndex: currentReportIndex.value,
    reportsLength: reports.value.length
  })
  
  if (isAutoSwitching.value || currentReportIndex.value < 0) {
    console.log('阻止切换: 正在切换中或索引无效')
    return
  }
  
  const nextIndex = currentReportIndex.value + 1
  console.log('下一个索引:', nextIndex)
  
  if (nextIndex >= reports.value.length) {
    console.log('到达列表末尾，尝试加载更多')
    // 如果已经是最后一个，尝试加载更多
    if (!loadingMore.value && !noMoreData.value) {
      await getDailyList(true)
      // 等待加载完成后再次尝试切换
  setTimeout(() => {
        if (nextIndex < reports.value.length) {
          console.log('加载更多后切换')
          loadNextReport(nextIndex)
        }
      }, 500)
    }
    return
  }

  console.log('开始加载下一个日报')
  loadNextReport(nextIndex)
}

// 切换到上一个日报
const switchToPreviousReport = async () => {
  console.log('switchToPreviousReport 调用:', {
    isAutoSwitching: isAutoSwitching.value,
    currentReportIndex: currentReportIndex.value,
    reportsLength: reports.value.length
  })
  
  if (isAutoSwitching.value || currentReportIndex.value <= 0) {
    console.log('阻止切换: 正在切换中或已经是第一个')
    return
  }
  
  const prevIndex = currentReportIndex.value - 1
  console.log('上一个索引:', prevIndex)
  
  if (prevIndex < 0) {
    console.log('已经是第一个日报')
    return
  }

  console.log('开始加载上一个日报')
  loadPreviousReport(prevIndex)
}

// 加载下一个日报
const loadNextReport = async (index: number) => {
  console.log('loadNextReport 调用:', {
    index,
    isAutoSwitching: isAutoSwitching.value,
    reportsLength: reports.value.length
  })
  
  if (isAutoSwitching.value || index >= reports.value.length) {
    console.log('阻止加载: 正在切换中或索引超出范围')
    return
  }
  
  isAutoSwitching.value = true
  switchingLoading.value = true
  switchingMessage.value = '正在加载下一篇日报...'
  
  const nextReport = reports.value[index]
  console.log('下一个日报:', nextReport)
  
  try {
    await loadReport(nextReport.ID)
    currentReportIndex.value = index
    console.log('切换成功，新索引:', index)
    
    // 设置刚刚切换的标志，防止连续触发
    justSwitched.value = true
    setTimeout(() => {
      justSwitched.value = false
      console.log('重置justSwitched标志')
    }, 1000) // 1秒后重置
  } catch (error) {
    console.error('切换日报失败:', error)
  } finally {
    isAutoSwitching.value = false
    switchingLoading.value = false
    switchingMessage.value = ''
    console.log('切换完成，重置标志')
  }
}

// 加载上一个日报
const loadPreviousReport = async (index: number) => {
  console.log('loadPreviousReport 调用:', {
    index,
    isAutoSwitching: isAutoSwitching.value,
    reportsLength: reports.value.length
  })
  
  if (isAutoSwitching.value || index < 0) {
    console.log('阻止加载: 正在切换中或索引无效')
    return
  }
  
  isAutoSwitching.value = true
  switchingLoading.value = true
  switchingMessage.value = '正在加载上一篇日报...'
  
  const prevReport = reports.value[index]
  console.log('上一个日报:', prevReport)
  
  try {
    await loadReport(prevReport.ID)
    currentReportIndex.value = index
    console.log('切换成功，新索引:', index)
    
    // 设置刚刚切换的标志，防止连续触发
    justSwitched.value = true
    setTimeout(() => {
      justSwitched.value = false
      console.log('重置justSwitched标志')
    }, 1000) // 1秒后重置
  } catch (error) {
    console.error('切换日报失败:', error)
  } finally {
    isAutoSwitching.value = false
    switchingLoading.value = false
    switchingMessage.value = ''
    console.log('切换完成，重置标志')
  }
}


// 检测虚拟键盘状态
const detectKeyboard = () => {
  const initialHeight = window.innerHeight
  const checkHeight = () => {
    const currentHeight = window.innerHeight
    isKeyboardOpen.value = currentHeight < initialHeight * 0.75
  }
  
  window.addEventListener('resize', checkHeight)
  return () => window.removeEventListener('resize', checkHeight)
}

// 自动保存草稿功能已移除

// 自动保存控制已移除

// 禁用缩放功能
const handleTouchStart = (event: TouchEvent) => {
  // 禁用多指缩放
  if (event.touches.length > 1) {
    event.preventDefault()
  }
}

const handleTouchMove = (event: TouchEvent) => {
  // 禁用多指缩放
  if (event.touches.length > 1) {
    event.preventDefault()
  }
  
  // 对于单指触摸，只禁用缩放但保留滚动
  if (event.touches.length === 1) {
    const target = event.target as HTMLElement
    
    // 检查是否在输入框或选择器上
    if (target && (
      target.tagName === 'INPUT' || 
      target.tagName === 'SELECT' || 
      target.classList.contains('el-input__inner') ||
      target.classList.contains('el-select') ||
      target.closest('.el-input') ||
      target.closest('.el-select')
    )) {
      // 在输入框或选择器上时，允许默认行为
      return
    }
    
  }
}

// 设置默认月份
const setDefaultMonth = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = (now.getMonth() + 1).toString().padStart(2, '0')
  selectedMonth.value = `${year}-${month}`
}

// 监听activeTab变化
watch(activeTab, () => {
  // 重置筛选条件
  selectedAuthor.value = 'all'
  selectedDepartment.value = 'all'
  searchKeyword.value = ''
  
  // 设置默认月份为当前月份
  setDefaultMonth()

  // 获取对应状态的日报列表
  getDailyList()
}, { immediate: true })

// 监听筛选条件变化
watch([selectedMonth, selectedAuthor, selectedDepartment, searchKeyword], () => {
  getDailyList()
}, { deep: true })

// 清理函数
const cleanup = () => {
  // 清理滚动事件监听器
  const drawerBody = document.querySelector('.mobile-drawer .el-drawer__body')
  if (drawerBody && detailScrollHandler.value) {
    drawerBody.removeEventListener('scroll', detailScrollHandler.value)
    detailScrollHandler.value = null
  }
  
  // 清理定时器
  if (scrollTimeout.value) {
    clearTimeout(scrollTimeout.value)
    scrollTimeout.value = null
  }
  
  // 重置状态标志
  justSwitched.value = false
  isAutoSwitching.value = false
  
  // 清理body的防晃动样式
  document.body.classList.remove('mobile-edit-open')
  removeBounceGuards()
  switchingLoading.value = false
  switchingMessage.value = ''
  showSwitchBubble.value = false
  switchBubblePosition.value = null
}

// 初始化
onMounted(async () => {
  // 确保用户信息已加载
  if (!userStore.userInfo.nickName) {
    await userStore.getUseInfo()
  }
  
  // 设置默认月份
  setDefaultMonth()
  
  // 检测虚拟键盘
  const cleanupKeyboard = detectKeyboard()
  
  getItemList()
  getAllUsers()
  getDailyList()
  
  // 清理函数
  onUnmounted(() => {
    cleanupKeyboard()
  })
})

// 监听窗口尺寸与键盘变化，动态更新内容区高度
// 编辑尺寸监听已移除

// 编辑状态监听已移除

// 组件卸载时清理
onUnmounted(() => {
  cleanup()
})

// 添加删除工作项方法
const removeWorkItem = (workType: 1 | 2 | 3 | 4 | 5, index: number) => {
  if (!currentReport.value || !Array.isArray(currentReport.value.workItems)) return
  // 找到该类型的第 index 条在总数组中的实际位置
  let count = -1
  const removeAt = currentReport.value.workItems.findIndex((w: any) => {
    if (w.workType === workType) {
      count += 1
      return count === index
    }
    return false
  })
  if (removeAt >= 0) {
    currentReport.value.workItems.splice(removeAt, 1)
  }
}
</script>

<style scoped>
/* 移动端样式重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  position: relative;
}

#app {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.mobile-daily-report {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow-x: hidden;
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
}

.mobile-header {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  left: 0;
  right: 0;
  min-height: 44px;
}

.mobile-tabs {
  flex: 1;
}

.mobile-tabs :deep(.el-tabs__nav) {
  width: 100%;
  display: flex;
}

.mobile-tabs :deep(.el-tabs__item) {
  flex: 1;
  text-align: center;
  padding: 0 5px;
}

.mobile-filters {
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 44px;
  z-index: 9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  left: 0;
  right: 0;
}

.search-container {
  padding: 12px 16px 8px;
}

.mobile-search {
  width: 100%;
}

.mobile-search :deep(.el-input__wrapper) {
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

.mobile-search :deep(.el-input__wrapper:hover) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #409EFF;
}

.mobile-search :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  border-color: #409EFF;
}

.filter-container {
  display: flex;
  padding: 8px 16px 12px;
  overflow-x: hidden;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  left: 0;
  right: 0;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  flex-direction: column;
  min-width: 100px;
  flex: 1;
  max-width: calc(50% - 4px);
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 8px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.filter-item-date {
  min-width: 120px;
  flex: 1.2;
  max-width: calc(60% - 4px);
}

.filter-item:hover {
  background-color: #fff;
  border-color: #409EFF;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
  transform: translateY(-1px);
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  gap: 4px;
}

.filter-icon {
  font-size: 14px;
  color: #409EFF;
}

.filter-label {
  font-size: 12px;
  color: #606266;
  font-weight: 500;
}

.mobile-filter {
  width: 100%;
}

.mobile-filter :deep(.el-input__wrapper) {
  border-radius: 6px;
  box-shadow: none;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  transition: all 0.2s ease;
}

.mobile-filter :deep(.el-input__wrapper:hover) {
  border-color: #c0c4cc;
}

.mobile-filter :deep(.el-input__wrapper.is-focus) {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.mobile-filter :deep(.el-select__placeholder) {
  color: #9ca3af;
  font-size: 13px;
}

.mobile-report-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  left: 0;
  right: 0;
}

.mobile-report-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
  border-left: 3px solid transparent;
}

.mobile-report-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.mobile-report-item.active {
  border-left-color: #409EFF;
  background-color: #f0f9ff;
}

.mobile-report-item.draft {
  border-left-color: #909399;
}

.mobile-report-item.submitted {
  border-left-color: #67c23a;
}

.report-date {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.report-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-author {
  font-size: 13px;
  color: #606266;
}

/* 加载更多样式 */
.loading-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  color: #666;
  font-size: 14px;
  gap: 8px;
}

.no-more-data {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  color: #999;
  font-size: 12px;
}


/* 详情页面样式 */
.mobile-drawer :deep(.el-drawer__body) {
  padding: 0 !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%);
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.mobile-drawer :deep(.el-drawer) {
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  background: #ffffff;
  border: none;
  height: 100vh;
  outline: none;
  margin: 0;
  padding: 0;
}

.mobile-drawer :deep(.el-drawer__wrapper) {
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
}

.mobile-drawer :deep(.el-drawer__container) {
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
}

.mobile-drawer :deep(.el-drawer__header) {
  display: none;
}

/* 重置模态框所有可能的外边距 */
.mobile-drawer {
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2000 !important;
}

.mobile-drawer :deep(*) {
  box-sizing: border-box;
}

/* 强制重置 el-drawer__body 的外边距 */
.mobile-drawer :deep(.el-drawer__body) {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
}

/* 重置所有可能的drawer相关元素 */
.mobile-drawer :deep(.el-drawer__wrapper),
.mobile-drawer :deep(.el-drawer__container),
.mobile-drawer :deep(.el-drawer),
.mobile-drawer :deep(.el-drawer__body) {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 重置drawer的定位和尺寸 */
.mobile-drawer :deep(.el-drawer) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
}

/* 最终强制重置 - 覆盖所有可能的默认样式 */
.mobile-drawer.el-drawer {
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  z-index: 2000 !important;
}

.mobile-drawer.el-drawer .el-drawer__wrapper {
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  border: none !important;
  outline: none !important;
}

.mobile-drawer.el-drawer .el-drawer__container {
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  border: none !important;
  outline: none !important;
}

.mobile-drawer.el-drawer .el-drawer__body {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  outline: none !important;
  overflow: hidden !important;
}

/* 全局强制重置 - 最高优先级 */
.mobile-drawer,
.mobile-drawer *,
.mobile-drawer *::before,
.mobile-drawer *::after {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 终极重置 - 使用all属性重置所有样式 */
.mobile-drawer.el-drawer {
  all: unset !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2000 !important;
  display: block !important;
  background: transparent !important;
}

/* 针对Element Plus Drawer的强制重置 */
.el-drawer.mobile-drawer {
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  z-index: 2000 !important;
}

.el-drawer.mobile-drawer .el-drawer__wrapper {
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

.el-drawer.mobile-drawer .el-drawer__container {
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

.el-drawer.mobile-drawer .el-drawer__body {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  outline: none !important;
  overflow: hidden !important;
  background: transparent !important;
}


/* 全新设计的头部样式 */
.modern-drawer-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0;
  position: relative;
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: hidden;
  border: none;
  outline: none;
}

.modern-drawer-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

/* 简化的头部样式 */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 8px;
  position: relative;
  z-index: 2;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s infinite;
  margin-right: 8px;
}

.status-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

.close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 36px;
  height: 36px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

/* 日期选择区域 */
.header-date-section {
  padding: 0 20px 8px;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.header-date-picker {
  width: 160px;
}

.header-date-picker :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: white;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.header-date-picker :deep(.el-input__wrapper:hover) {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.header-date-picker :deep(.el-input__wrapper.is-focus) {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.header-date-picker :deep(.el-input__inner) {
  color: white;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.header-date-picker :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.6);
}

.header-date-picker :deep(.el-input__suffix) {
  color: rgba(255, 255, 255, 0.8);
}

.header-actions {
  padding: 0 20px 12px;
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12px;
}

.draft-btn {
  flex: 1;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid #cbd5e1;
  color: #475569;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}

.draft-btn:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.submit-btn {
  flex: 1;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: white;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.submit-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.drag-indicator {
  width: 40px;
  height: 4px;
  background: linear-gradient(90deg, #d1d5db 0%, #9ca3af 50%, #d1d5db 100%);
  border-radius: 2px;
  margin: 12px auto 8px;
  opacity: 0.6;
  transition: all 0.2s ease;
  cursor: pointer;
}

.drag-indicator:hover {
  opacity: 0.8;
  transform: scaleY(1.2);
}

.header-content {
  padding: 16px 20px 20px;
}

.header-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.header-left {
  flex: 1;
  min-width: 0;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.title-icon {
  color: #3b82f6;
  font-size: 20px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-text {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

.header-subtitle {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  opacity: 0.9;
}

.close-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  width: 36px;
  height: 36px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.close-btn:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #475569;
  transform: scale(1.05);
}

.close-btn:active {
  transform: scale(0.95);
  transition: all 0.1s ease;
}

/* 操作按钮区域 */
.action-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
}

.draft-btn {
  flex: 1;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid #cbd5e1;
  color: #475569;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
}

.draft-btn:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  border-color: #94a3b8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.draft-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease;
}

.submit-btn {
  flex: 1;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  color: white;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.submit-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
  transition: all 0.1s ease;
}


.modern-content-container {
  padding: 12px 20px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  flex: 1;
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slideUp 0.4s ease-out;
}


.daily-detail-container::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 5px;
  background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 50%, #cbd5e1 100%);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.daily-detail-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
}

.report-header {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  padding: 24px;
  border-radius: 20px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.report-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #409EFF 0%, #66b1ff 50%, #409EFF 100%);
}

.report-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.readers-container {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  padding: 24px;
  border-radius: 20px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.readers-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #67c23a 0%, #85ce61 50%, #67c23a 100%);
}

.readers-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

.content-icon {
  font-size: 16px;
  color: #409EFF;
}

.content-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.readers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reader-tag {
  background-color: #f0f9ff;
  color: #409EFF;
  border: 1px solid #b3d8ff;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 12px;
}

/* 简化的内容区域 */
.work-content-section {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
  animation: fadeInUp 0.6s ease-out;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  flex: 1;
}

.comment-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.comment-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4);
}

/* 工作项网格布局 */
.work-items-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.work-category {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  margin-bottom: 16px;
  transition: none !important;
  animation: none !important;
}

.work-category:hover {
  transform: none !important;
  box-shadow: none !important;
}

.category-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
  transition: none !important;
}

.category-header:hover {
  background: transparent !important;
  border-bottom-color: #e2e8f0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
}

.expand-icon {
  font-size: 16px;
  color: #666;
  transition: none !important;
  margin-left: auto;
}

.expand-icon.expanded {
  transform: none !important;
  color: inherit !important;
}

.category-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}

.category-title {
  flex: 1;
  min-width: 0;
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin: 0;
  line-height: 1.6;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.category-count {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 6px;
  min-width: 20px;
  text-align: center;
}

.work-content-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e6a23c 0%, #f0c78a 50%, #e6a23c 100%);
}

.work-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.work-content-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.work-content-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-comment-btn {
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  border: none;
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
  transition: all 0.3s ease;
}

.mobile-comment-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
}

.work-items-container {
  margin-top: 20px;
  transition: none !important;
}

.work-item-section {
  margin-bottom: 28px;
}

.work-item-section:last-child {
  margin-bottom: 0;
}

.section-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
}

.section-title {
    font-size: 14px;
  font-weight: 600;
  color: #606266;
  margin: 0;
}

.work-item {
  margin-bottom: 16px;
  padding: 16px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  animation: none !important;
}

.work-item:last-child {
  margin-bottom: 0;
}


.work-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.15);
}

.work-item:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(64, 158, 255, 0.1);
}

.plain-text-item {
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

.plain-text-content {
  font-size: 15px;
  color: #2d3748;
  word-break: break-word;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* 切换loading提示样式 */
.switching-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  pointer-events: none;
}

.loading-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 16px 24px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: fadeInOut 0.3s ease-in-out;
}

.loading-icon {
  font-size: 16px;
  animation: rotate 1s linear infinite;
}

.loading-text {
  white-space: nowrap;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 切换气泡样式 */
.switch-bubble {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  pointer-events: auto;
}

.switch-bubble-top {
  top: 80px;
}

.switch-bubble-bottom {
  bottom: 11px;
}

.bubble-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.95) 0%, rgba(102, 177, 255, 0.95) 100%);
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  animation: bubbleAppear 0.3s ease-out;
}

.bubble-content:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.5);
}

.bubble-content:active {
  transform: scale(0.95);
}

.bubble-icon {
  font-size: 16px;
}

.bubble-text {
  white-space: nowrap;
  font-weight: 600;
}

@keyframes bubbleAppear {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}


/* 创建日报按钮样式 */
.create-report-container {
  padding: 12px 16px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 44px;
  z-index: 8;
}

.create-report-btn {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.create-report-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
}

.create-report-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.create-report-btn .btn-icon {
  margin-right: 8px;
  font-size: 18px;
  transition: all 0.3s ease;
}

.create-report-btn:disabled .btn-icon {
  opacity: 0.5;
}

/* 操作按钮样式 */
.action-btn {
  margin-left: 8px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
}

/* 动画关键帧 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }
}

/* 日期选择器样式 */
.date-picker-container {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  animation: fadeInUp 0.4s ease-out 0.1s both;
}

.mobile-date-picker {
  width: 100%;
}

.mobile-date-picker :deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.mobile-date-picker :deep(.el-input__wrapper:hover) {
  border-color: #409EFF;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}

.mobile-date-picker :deep(.el-input__wrapper.is-focus) {
  border-color: #409EFF;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.2);
}

/* 编辑头部样式 */
.edit-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

.edit-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 50%, #3b82f6 100%);
  opacity: 0.3;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  position: relative;
}

.header-left {
  flex: 1;
}

.title-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-with-icon {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-icon {
  color: #3b82f6;
  font-size: 24px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.edit-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: center;
  width: 100%;
}

.edit-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  font-weight: 400;
  opacity: 0.9;
}

.header-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.cancel-btn {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #6b7280;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.2s ease;
  flex: 1;
}

.cancel-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #374151;
}

.save-btn {
  background: #3b82f6;
  border: none;
  color: #ffffff;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.2s ease;
}

.save-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.draft-btn {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
  flex: 1;
  font-size: 13px;
}

.draft-btn:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.submit-btn {
  background: #10b981;
  border: none;
  color: #ffffff;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
  flex: 1;
  font-size: 13px;
}

.submit-btn:hover {
  background: #059669;
  transform: translateY(-1px);
}

/* 编辑界面样式 */
.mobile-edit-drawer :deep(.el-drawer) {
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  margin-left: 0 !important;
}

.mobile-edit-drawer :deep(.el-drawer__header) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.mobile-edit-drawer :deep(.el-drawer) {
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.mobile-edit-drawer :deep(.el-drawer__body) {
  padding: 0 !important;
  margin: 0 !important;
}

.mobile-edit-drawer :deep(.el-drawer__body > *:first-child) {
  margin-top: 0 !important;
}

.mobile-edit-drawer :deep(.el-drawer__container) {
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mobile-edit-drawer :deep(.el-overlay) {
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  inset: 0 !important;
}

/* 兜底：修复部分设备上左侧出现1px空隙的问题 */
.mobile-edit-drawer :deep(.el-drawer),
.mobile-edit-drawer :deep(.el-drawer__wrapper),
.mobile-edit-drawer :deep(.el-drawer__container),
.mobile-edit-drawer :deep(.el-drawer__body) {
  left: 0 !important;
  width: 100% !important;
  transform: none !important;
  -webkit-transform: none !important;
  overflow-x: hidden !important;
}

/* 当模态框打开时，防止body滚动 */
body.el-popup-parent--hidden {
  overflow: hidden !important;
}

/* 防止页面晃动和回弹 */
/* 移除对body的固定，避免双滚动条 */

/* 打开编辑抽屉时，强制隐藏外层滚动条（仅保留 .edit-content 内部滚动） */
body.mobile-edit-open .el-overlay,
body.mobile-edit-open .el-drawer__wrapper,
body.mobile-edit-open .el-drawer__container,
body.mobile-edit-open .el-drawer,
body.mobile-edit-open .el-drawer__body {
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* 打开时固定容器层，避免其自身出现滚动 */
body.mobile-edit-open .el-drawer__wrapper,
body.mobile-edit-open .el-drawer__container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
}

body.mobile-edit-open .el-overlay::-webkit-scrollbar,
body.mobile-edit-open .el-drawer__wrapper::-webkit-scrollbar,
body.mobile-edit-open .el-drawer__container::-webkit-scrollbar,
body.mobile-edit-open .el-drawer::-webkit-scrollbar,
body.mobile-edit-open .el-drawer__body::-webkit-scrollbar {
  display: none !important;
}

/* 强制重置html和body的外边距 */
/* 不再全局固定 html, body，避免遮挡与滚动条 */

/* 强制重置所有可能的根容器 */
.mobile-edit-drawer,
.mobile-edit-drawer>*,
.mobile-edit-drawer :deep(*) {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
}

/* 强制重置所有可能的边距和定位 */
.mobile-edit-drawer :deep(.el-drawer__wrapper) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  transform: translate3d(0, 0, 0) !important;
}

/* 确保drawer相关的所有容器都不产生滚动条 */
.mobile-edit-drawer :deep(.el-drawer__container) {
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 强制隐藏所有可能的滚动条 */
.mobile-edit-drawer {
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: none !important;
  -webkit-overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: none !important;
}

/* 全局重置所有元素的外边距 */
.mobile-edit-drawer *,
.mobile-edit-drawer *::before,
.mobile-edit-drawer *::after {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

/* 特别强制重置el-drawer__body的所有间距 */
.mobile-edit-drawer :deep(.el-drawer__body) {
  margin: 0 !important;
  padding: 8px 0 0 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* 恢复必要的内边距 */
.mobile-edit-drawer .header-content {
  padding: 0 !important;
}

.mobile-edit-drawer .edit-content {
  padding: 0 !important;
}

/* 专门防回弹样式 */
.mobile-edit-drawer :deep(.el-drawer__body) {
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: none !important;
  -webkit-overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: none !important;
  scroll-behavior: auto !important;
  -webkit-scroll-behavior: auto !important;
  margin: 0 !important;
  padding: 8px 0 0 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.mobile-edit-drawer :deep(.el-drawer__container),
.mobile-edit-drawer :deep(.el-drawer),
.mobile-edit-drawer .edit-content {
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: none !important;
  -webkit-overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: none !important;
  scroll-behavior: auto !important;
  -webkit-scroll-behavior: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 特别针对el-drawer__body的强制重置 */
.mobile-edit-drawer :deep(.el-drawer__body) {
  margin: 0 !important;
  padding: 8px 0 0 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* 编辑按钮样式 */
.edit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

.edit-btn:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.cancel-btn {
  background: #f56565;
  border: none;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background: #e53e3e;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 101, 101, 0.4);
}

/* 工作项查看模式样式 */
.work-item-view {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.work-item-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.work-item-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.work-item-label {
  font-weight: 600;
  color: #4a5568;
  min-width: 80px;
  flex-shrink: 0;
}

.work-item-value {
  color: #2d3748;
  flex: 1;
  word-break: break-word;
}

/* 特别针对可能产生外边距的元素 */
.mobile-edit-drawer :deep(.el-drawer__wrapper),
.mobile-edit-drawer :deep(.el-drawer__container),
.mobile-edit-drawer :deep(.el-drawer),
.mobile-edit-drawer :deep(.el-drawer__body) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 确保drawer完全贴合屏幕 */
.mobile-edit-drawer :deep(.el-drawer__wrapper) {
  inset: 0 !important;
  position: fixed !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: none !important;
  -webkit-overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: none !important;
}

.mobile-edit-drawer * {
  box-sizing: border-box;
}

/* 重置所有可能的外边距 */
.mobile-edit-drawer :deep(.el-drawer__wrapper),
.mobile-edit-drawer :deep(.el-drawer__container),
.mobile-edit-drawer :deep(.el-drawer),
.mobile-edit-drawer :deep(.el-drawer__body),
.mobile-edit-drawer :deep(.el-overlay),
.mobile-edit-drawer .daily-edit-container,
.mobile-edit-drawer .edit-header,
.mobile-edit-drawer .header-content,
.mobile-edit-drawer .edit-title,
.mobile-edit-drawer .header-actions {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
}

/* 特别重置header-content的内边距 */
.mobile-edit-drawer .header-content {
  padding: 0 !important;
}

/* 重置模态框容器的所有边距 */
.mobile-edit-drawer :deep(.el-drawer__wrapper) {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

.mobile-edit-drawer .el-drawer__body {
  padding: 0;
  /* 移除默认20px内边距 */
  overflow: hidden;
  /* 避免内部滚动与抽屉滚动冲突 */
}

/* 强制隐藏所有可能的滚动条 */
.mobile-edit-drawer * {
  scrollbar-width: none !important;
  /* Firefox */
  -ms-overflow-style: none !important;
  /* IE and Edge */
}

.mobile-edit-drawer *::-webkit-scrollbar {
  display: none !important;
  /* Chrome, Safari, Opera */
}

.edit-content::-webkit-scrollbar {
  display: block !important;
  width: 6px;
}

.edit-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.edit-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.edit-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.daily-edit-container {
  height: 100vh !important;
  max-height: 100vh !important;
  width: 100vw !important;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: none !important;
  -webkit-overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: none !important;
}


.edit-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

.edit-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 50%, #3b82f6 100%);
  opacity: 0.3;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 20px 14px;
  position: relative;
}

.header-left {
  flex: 1;
}

.title-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-with-icon {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-icon {
  color: #3b82f6;
  font-size: 24px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.edit-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: center;
  width: 100%;
}

.edit-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  font-weight: 400;
  opacity: 0.9;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 2px;
}


.cancel-btn {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #6b7280;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.2s ease;
  flex: 1;
}

.cancel-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #374151;
}

.save-btn {
  background: #3b82f6;
  border: none;
  color: #ffffff;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.2s ease;
}

.save-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.edit-content {
  flex: 1;
  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 12px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  /* 让flex分配高度，避免因 padding/margin 造成的溢出计算 */
  height: auto;
  max-height: none;
}


.date-section {
  background: #ffffff;
  padding: 12px 12px 8px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.date-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  color: #374151;
  font-size: 15px;
}

.date-icon {
  color: #3b82f6;
  font-size: 20px;
}

.work-content-section {
  background: #ffffff;
  padding: 12px 12px 8px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.work-content-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef2f7;
}

.work-icon {
  color: #10b981;
  font-size: 22px;
}

.work-content-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  letter-spacing: -0.01em;
}

.edit-section {
  background: #ffffff;
  padding: 24px;
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4e7ed;
  position: relative;
  overflow: hidden;
}

.edit-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #409EFF 0%, #66b1ff 50%, #409EFF 100%);
}

.section-header {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.date-picker {
  width: 100%;
}

.date-picker :deep(.el-input__wrapper) {
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  padding: 12px 16px;
}

.date-picker :deep(.el-input__wrapper:hover) {
  border-color: #409EFF;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}

.date-picker :deep(.el-input__wrapper.is-focus) {
  border-color: #409EFF;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.2);
}

.date-picker :deep(.el-input__inner) {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.work-type-section {
  margin-bottom: 10px;
  padding: 12px 12px 8px 12px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #eef2f7;
  transition: all 0.2s ease;
}

.work-type-section:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.work-type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #e5e7eb;
}

.work-type-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0;
  position: relative;
}

.work-type-title::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 2px;
}

.add-work-btn {
  background: #10b981;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  transition: all 0.2s ease;
}

.add-work-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(103, 194, 58, 0.3);
}

/* 空状态样式 */
.empty-work-state {
  text-align: center;
  padding: 24px 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 2px dashed #cbd5e1;
  margin: 12px 0;
}

.empty-icon {
  font-size: 32px;
  color: #94a3b8;
  margin-bottom: 12px;
}

.empty-text {
    font-size: 14px;
  color: #64748b;
  font-weight: 500;
  margin: 0 0 4px 0;
}

.empty-hint {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
}

.work-item-edit {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.work-item-edit:hover {
  border-color: #409EFF;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}


.work-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #fbfbfb;
  border-bottom: 1px solid #eef2f7;
}

.work-item-number {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.work-item-fields {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.work-items-container {
  transition: none !important;
  overflow: hidden;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-group .field-label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin: 0;
}

.required {
  color: #ef4444;
  font-weight: 600;
}

.work-item-edit.has-error {
  border-color: #fca5a5;
}

.work-input.error :deep(.el-input__wrapper),
.work-select.error :deep(.el-input__wrapper) {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

.work-input.error :deep(.el-input__wrapper:hover),
.work-select.error :deep(.el-input__wrapper:hover) {
  border-color: #dc2626;
}

.work-input.error :deep(.el-input__wrapper.is-focus),
.work-select.error :deep(.el-input__wrapper.is-focus) {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.error-message {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 4px;
}

.error-message .el-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.work-input {
  flex: 1;
  min-width: 120px;
}

.work-input :deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.work-input :deep(.el-input__wrapper:hover) {
  border-color: #409EFF;
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.1);
}

.work-input :deep(.el-input__wrapper.is-focus) {
  border-color: #409EFF;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.work-select {
  flex: 1;
  min-width: 100px;
}

.work-select :deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.work-select :deep(.el-input__wrapper:hover) {
  border-color: #409EFF;
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.1);
}

.work-select :deep(.el-input__wrapper.is-focus) {
  border-color: #409EFF;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.remove-btn {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(245, 108, 108, 0.2);
  transition: all 0.3s ease;
}

.remove-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(245, 108, 108, 0.3);
}

/* 只读工作项样式 */
.work-item-readonly {
  margin-bottom: 8px;
  padding: 12px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.work-item-readonly:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.readonly-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.readonly-row.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  align-items: start;
}

.readonly-pair {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.readonly-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 0;
  overflow: hidden;
}

.field-label {
  font-weight: 600;
  color: #64748b;
  min-width: 70px;
  flex-shrink: 0;
  font-size: 13px;
}

.field-value {
  color: #1f2937;
  flex: 1;
  word-break: break-word;
  line-height: 1.5;
  font-size: 13px;
  background: #f8fafc;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  white-space: normal;
  max-height: none;
  display: block;
}

.empty-state {
  text-align: center;
  padding: 12px;
  color: #94a3b8;
  font-size: 13px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px dashed #cbd5e1;
  margin: 6px 0;
  font-weight: 500;
}

/* 移动端优化 */
@media (max-width: 480px) {
  .mobile-daily-report {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    /* 禁用缩放但保留滚动 */
    touch-action: pan-x pan-y;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* 编辑界面移动端优化 */
  .mobile-edit-drawer {
    touch-action: pan-y;
  }

  .mobile-edit-drawer :deep(.el-drawer) {
    /* 优化触摸体验 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 虚拟键盘适配 */
  .mobile-edit-drawer.keyboard-open :deep(.el-drawer__body) {
    height: calc(100vh - 200px) !important;
    max-height: calc(100vh - 200px) !important;
  }

  /* 触摸友好的按钮 */
  .add-work-btn,
  .remove-btn,
  .cancel-btn,
  .save-btn,
  .draft-btn,
  .submit-btn {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }

  /* 移动端按钮布局优化 */
  .header-content {
    gap: 16px;
  }

  .header-actions {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  /* 创建日报按钮移动端优化 */
  .create-report-container {
    padding: 8px 12px;
    position: sticky;
    top: 40px;
  }

  .create-report-btn {
    height: 40px;
    font-size: 15px;
    border-radius: 10px;
  }

  .create-report-btn .btn-icon {
    font-size: 16px;
    margin-right: 6px;
  }

  /* 操作按钮移动端优化 */
  .action-btn {
    margin-left: 6px;
    font-size: 12px;
    padding: 6px 12px;
    min-height: 32px;
  }

  /* 移动端头部优化 */
  .modern-drawer-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  .status-bar {
    padding: 12px 16px 6px;
  }
  
  .title-section {
    padding: 0 16px 16px;
  }
  
  .title-card {
    padding: 16px;
    border-radius: 16px;
  }
  
  .title-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  
  .modern-title {
    font-size: 20px;
  }
  
  .modern-subtitle {
    font-size: 13px;
  }
  
  .floating-actions {
    padding: 0 16px 16px;
  }
  
  .action-card {
    padding: 10px;
    border-radius: 12px;
  }
  
  .modern-draft-btn,
  .modern-submit-btn {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 40px;
    border-radius: 10px;
  }
  
  .header-top {
    padding: 12px 16px 6px;
  }
  
  .header-date-section {
    padding: 0 16px 6px;
  }
  
  .header-date-picker {
    width: 140px;
  }
  
  .header-date-picker :deep(.el-input__inner) {
    font-size: 13px;
  }
  
  .header-actions {
    padding: 0 16px 8px;
  }

  
  .header-subtitle {
    font-size: 13px;
  }
  
  .close-btn {
    width: 32px;
    height: 32px;
  }
  
  .action-buttons {
    gap: 8px;
  }
  
  .draft-btn,
  .submit-btn {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 40px;
    border-radius: 10px;
  }
  
  /* 移动端触摸优化 */
  .work-item {
    padding: 14px;
    margin-bottom: 12px;
  }
  
  .work-content-container {
    padding: 16px;
    margin-bottom: 12px;
  }
  
  .modern-content-container {
    padding: 8px 12px 20px;
  }
  
  .date-selection-card {
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 16px;
  }
  
  .work-content-section {
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 16px;
  }
  
  .section-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
  }
  
  .section-title {
    font-size: 18px;
  }
  
  .work-category-card {
    padding: 16px;
    border-radius: 12px;
  }
  
  .category-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
  }
  
  .category-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 14px;
  }
  
  .category-title {
    font-size: 15px;
  }
  
  /* 日期选择器移动端优化 */
  .date-picker-container {
    margin-top: 12px;
    padding: 12px;
    border-radius: 10px;
  }

  .mobile-date-picker :deep(.el-input__wrapper) {
    min-height: 40px;
    border-radius: 6px;
  }

  .mobile-date-picker :deep(.el-input__inner) {
    font-size: 14px;
  }

  /* 输入框触摸优化 */
  .work-input :deep(.el-input__wrapper),
  .work-select :deep(.el-input__wrapper) {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* 文本域触摸优化 */
  .work-input :deep(.el-textarea__inner) {
    min-height: 80px;
    touch-action: manipulation;
  }
  
  /* 确保列表可以滚动 */
  .mobile-report-list {
    touch-action: pan-y;
    overflow-y: auto;
  }
  
  /* 禁用输入框和选择器的缩放 */
  .mobile-daily-report input,
  .mobile-daily-report select,
  .mobile-daily-report .el-input__inner,
  .mobile-daily-report .el-select {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  .mobile-header {
    width: 100vw;
    max-width: 100vw;
    padding: 4px 8px;
    min-height: 40px;
  }
  
  .mobile-filters {
    width: 100vw;
    max-width: 100vw;
  }
  
  .filter-container {
    width: 100vw;
    max-width: 100vw;
    padding: 6px 12px 10px;
    gap: 6px;
  }
  
  .filter-item {
    min-width: 90px;
    max-width: calc(50% - 3px);
    padding: 6px;
  }
  
  .filter-item-date {
    min-width: 110px;
    max-width: calc(60% - 3px);
  }
  
  .mobile-report-list {
    width: 100vw;
    max-width: 100vw;
    padding: 6px;
  }

  .work-item-edit {
    margin-bottom: 12px;
  }

  .work-item-header {
    padding: 10px 12px;
  }

  .work-item-fields {
    padding: 12px;
    gap: 12px;
  }

  .work-input,
  .work-select {
    min-width: 100%;
  }

  .field-group {
    gap: 4px;
  }

  .field-group .field-label {
    font-size: 12px;
  }

  .empty-work-state {
    padding: 20px 12px;
  }

  .empty-icon {
    font-size: 28px;
    margin-bottom: 10px;
  }

  .empty-text {
    font-size: 13px;
  }

  .empty-hint {
    font-size: 11px;
  }

  .readonly-field {
    flex-direction: column;
    gap: 4px;
  }

  .field-label {
    min-width: auto;
    font-size: 13px;
  }

  .field-value {
    font-size: 13px;
    padding: 4px 8px;
  }

  .work-type-section {
    padding: 16px;
    margin-bottom: 16px;
  }

  .edit-section {
    padding: 16px;
    margin-bottom: 16px;
  }
}

/* 贴顶：移除抽屉内容顶部任何内边距与首子元素外边距 */
.mobile-edit-drawer :deep(.el-drawer) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.mobile-edit-drawer :deep(.el-drawer__body) {
  padding-top: 0 !important;
}

/* 直接针对 el-drawer__body 的强制重置 */
.el-drawer__body {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* 针对移动端drawer的body强制重置 */
.mobile-drawer .el-drawer__body {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 最高优先级重置 - 覆盖所有可能的样式 */
html body .el-drawer__body {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

html body .mobile-drawer .el-drawer__body {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 重置 Element Plus 的 CSS 变量 */
:root {
  --el-drawer-padding-primary: 0 !important;
}

/* 强制覆盖所有可能的 padding 设置 */
.el-drawer__body,
.mobile-drawer .el-drawer__body,
.mobile-drawer :deep(.el-drawer__body) {
  padding: 0 !important;
  margin: 0 !important;
  --el-drawer-padding-primary: 0 !important;
}

/* 使用更高优先级的选择器强制重置 */
html body div.el-drawer__body {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 针对移动端drawer的最终重置 */
html body div.mobile-drawer div.el-drawer__body {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.mobile-edit-drawer :deep(.el-drawer__body > *:first-child) {
  margin-top: 0 !important;
}

/* 展开/折叠图标样式 */
.expand-icon {
  margin-left: auto;
  /* 将图标推到右边 */
  transition: none !important;
}

.expand-icon.is-expanded {
  transform: none !important;
}

/* 字段行布局样式 */
.field-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.field-row .field-group {
  flex: 1;
  margin-bottom: 0;
}

/* 移动端响应式布局 */
@media (max-width: 768px) {
  .field-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .field-row .field-group {
    margin-bottom: 16px;
  }
}

/* 更小屏幕排版与字号优化（手机） */
@media (max-width: 480px) {
  .category-header { gap: 6px; padding-bottom: 4px; }
  .work-category { padding: 12px; }
  .category-icon { width: 26px; height: 26px; font-size: 12px; }
  .category-title { font-size: 13px; line-height: 1.35; font-weight: 600; }
  .category-count { font-size: 9px; padding: 1px 4px; min-width: 16px; }
  .add-work-btn { height: 24px; padding: 0 8px; font-size: 11px; }
  .expand-icon { font-size: 13px; }
}

@media (max-width: 360px) {
  .work-category { padding: 10px; }
  .category-icon { width: 22px; height: 22px; font-size: 11px; }
  .category-title { font-size: 8px; line-height: 1.25; font-weight: 600; }
  .add-work-btn { height: 22px; padding: 0 6px; font-size: 10px; }
  .expand-icon { font-size: 12px; }
}

/* 终极禁用工作类型卡片的弹性/悬浮效果（提高优先级） */
.work-category,
.work-category * {
  transition: none !important;
}
.work-category:hover,
.work-category:active {
  transform: none !important;
  box-shadow: none !important;
}
.work-category:hover .category-header,
.work-category:active .category-header {
  background: transparent !important;
  border-bottom-color: #e2e8f0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* 防止其他选择器再次覆盖 */
:where(.work-category):hover { transform: none !important; box-shadow: none !important; }

/* 禁用工作项容器与标题悬浮弹性效果 */
.work-item-edit,
.work-item-header {
  transition: none !important;
}
.work-item-edit:hover,
.work-item-edit:active,
.work-item-header:hover,
.work-item-header:active {
  background: transparent !important;
  border-color: #eef2f7 !important;
  box-shadow: none !important;
  transform: none !important;
}
</style>

<!-- 全局样式强制重置 -->
<style>
/* 全局强制重置 el-drawer__body 的 padding */
.el-drawer__body {
  padding: 0 !important;
  margin: 0 !important;
}

/* 针对移动端drawer的全局重置 */
.mobile-drawer .el-drawer__body {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 最高优先级全局重置 */
html body div.el-drawer__body {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 项目选择下拉框样式 */
.work-select :deep(.el-select__wrapper) {
  text-align: center;
}

.work-select :deep(.el-select__selected-item) {
  text-align: center;
  justify-content: center;
}

.work-select :deep(.el-input__inner) {
  text-align: center;
}

/* 下拉选项居中显示 */
.work-select :deep(.el-select-dropdown__item) {
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
}

/* 下拉选项内容居中 */
.work-select :deep(.el-select-dropdown__item span) {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

/* 下拉选项悬停状态居中 */
.work-select :deep(.el-select-dropdown__item:hover) {
  text-align: center !important;
  justify-content: center !important;
}

/* 下拉选项选中状态居中 */
.work-select :deep(.el-select-dropdown__item.is-selected) {
  text-align: center !important;
  justify-content: center !important;
}

/* 全局强制居中 - 最高优先级 */
.el-select-dropdown__item {
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
}

.el-select-dropdown__item span {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

/* 针对移动端drawer中的下拉选项 */
.mobile-drawer .el-select-dropdown__item {
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
}

.mobile-drawer .el-select-dropdown__item span {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

/* 终极强制居中 - 使用最高优先级选择器 */
html body .el-select-dropdown__item {
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .el-select-dropdown__item span {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 针对移动端drawer的终极重置 */
html body .mobile-drawer .el-select-dropdown__item {
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .mobile-drawer .el-select-dropdown__item span {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 展开/折叠图标样式 */
.expand-icon {
  margin-left: auto;
  /* 将图标推到右边 */
  transition: none !important;
}

.expand-icon.is-expanded {
  transform: none !important;
}
</style>

/* 关闭工作项内输入控件的过渡与阴影，避免聚焦时抖动 */
.work-item .el-input__wrapper,
.work-item .el-input__wrapper:hover,
.work-item .el-input.is-focus .el-input__wrapper,
.work-item .el-textarea__inner,
.work-item .el-textarea__inner:focus,
.work-item .el-select .el-input__wrapper,
.work-item .el-input-number .el-input__wrapper {
  transition: none !important;
  box-shadow: none !important;
}
.work-item .el-input__inner,
.work-item .el-textarea__inner {
  transition: none !important;
}
.work-item .el-input__wrapper,
.work-item .el-select .el-input__wrapper,
.work-item .el-input-number .el-input__wrapper {
  border-width: 1px !important;
}

/* 提交loading遮罩样式 */
.submit-loading-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

/* 加载日报详情loading遮罩样式 */
.report-loading-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  transform: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  inset: 0 !important;
}

/* 强制覆盖所有可能的样式干扰 */
.report-loading-overlay * {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.submit-loading-overlay .loading-content {
  background: white !important;
  padding: 24px 32px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  min-width: 200px !important;
  text-align: center !important;
  position: relative !important;
  z-index: 10000 !important;
}

.report-loading-overlay .loading-content {
  background: white !important;
  padding: 24px 32px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  min-width: 200px !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1000000 !important;
  margin: 0 !important;
  transform: none !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  left: 50% !important;
  top: 50% !important;
  margin-left: -100px !important;
  margin-top: -50px !important;
}

.submit-loading-overlay .loading-icon {
  font-size: 28px !important;
  color: #409EFF !important;
  animation: rotate 1s linear infinite !important;
  margin: 0 !important;
}

.submit-loading-overlay .loading-text {
  font-size: 16px !important;
  color: #303133 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.report-loading-overlay .loading-icon {
  font-size: 28px !important;
  color: #409EFF !important;
  animation: rotate 1s linear infinite !important;
  margin: 0 !important;
}

.report-loading-overlay .loading-text {
  font-size: 16px !important;
  color: #303133 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 创建日报相关：彻底关闭动效 */
.create-report-btn,
.mobile-drawer :deep(.el-drawer),
.mobile-drawer :deep(.el-drawer__wrapper),
.mobile-drawer :deep(.el-drawer__container),
.mobile-drawer :deep(.el-drawer__body),
.mobile-edit-drawer :deep(.el-drawer),
.mobile-edit-drawer :deep(.el-drawer__wrapper),
.mobile-edit-drawer :deep(.el-drawer__container),
.mobile-edit-drawer :deep(.el-drawer__body) {
  transition: none !important;
  animation: none !important;
}

/* 创建日报按钮无按压动画/阴影 */
.create-report-btn { box-shadow: none !important; transform: none !important; }
.create-report-btn:hover, .create-report-btn:active { box-shadow: none !important; transform: none !important; }

/* Drawer 遮罩与弹出无过渡 */
.el-overlay, .el-overlay-dialog, .el-overlay.is-message-box,
.el-drawer, .el-drawer__wrapper, .el-drawer__container, .el-drawer__body {
  transition: none !important;
  animation: none !important;
}

/* 展开/收起箭头也去动画（如仍存在） */
.expand-icon, .expand-icon.expanded { transition: none !important; transform: none !important; }